toggle-width = 25px
toggle-height = toggle-width * 0.8
toggle-line = 2px
transition-duration = 0.4s
lang-select-height = 40px

#mobile-nav
    position fixed
    top 0
    width mobile-nav-width
    left @width * -1
    height 100%
    background color-navy
    transition transition-duration
    .mobile-nav-on &
        transform translateX(100%)

#mobile-nav-inner
    overflow-y auto
    padding 10px 0
    position absolute
    top 0
    bottom lang-select-height
    left 0
    right 0
    -webkit-overflow-scrolling touch

#mobile-nav-toggle
    position absolute
    top 0
    bottom 0
    left gutter-width
    width toggle-width
    height toggle-height
    margin auto
    opacity 0.5
    cursor pointer
    transition 0.2s
    &active, .mobile-nav-on &
        opacity 1
    @media mq-normal
        display none

.mobile-nav-toggle-bar
    background color-black
    position absolute
    left 0
    width 100%
    height toggle-line
    transition transition-duration
    transform-origin 0
    border-radius toggle-line
    &:first-child
        top 0
        .mobile-nav-on &
            transform rotate(45deg)
    &:nth-child(2)
        top (toggle-height - toggle-line) * 0.5
        .mobile-nav-on &
            opacity 0
    &:last-child
        top toggle-height - toggle-line
        .mobile-nav-on &
            transform rotate(-45deg)

.mobile-nav-li
    display flex
    padding 15px 0
    align-items center  
    text-align center
    justify-content center

.mobile-nav-link
    width auto
    color color-white
    text-decoration none
    line-height 1
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    .active &
        color color-link-hover

.mobile-nav-title
    color color-link
    font-weight bold
    padding 10px 15px
    line-height 1
    display block
    border-top 1px solid #444
    margin-top 10px
    white-space nowrap
    overflow hidden
    text-overflow ellipsis

#container
    transition transition-duration
    width 100%
    height 100%
    -webkit-overflow-scrolling touch
    .mobile-nav-on &
        transform translateX(mobile-nav-width)
        overflow hidden
        position fixed
        top 0
        bottom 0

#mobile-nav-dimmer
    position absolute
    top 0
    left 100%
    height 100%
    background color-black
    opacity 0
    transition opacity transition-duration, transform 0s transition-duration
    .mobile-nav-on &
        width 100%
        opacity 0.7
        transform translateX(-100%)
        transition opacity transition-duration
